import React, { Component } from 'react';
import PropTypes from "prop-types";
import { StyleSheet, Image, Text, View, TouchableHighlight ,Dimensions} from 'react-native';

import Label from '../label';
// import Constant from '../../config/theme/standard/constant';
import Color from '../../config/theme/standard/color';
import FontSize from "../../config/theme/standard/fonts";
class CheckBox extends Component {
    constructor(props) {
        super(props);

        this.state = {
            internalChecked: props.isChecked, //初始选择状态
            isDisabled : props.disabled, //是否禁用
        };
    }

    onChange = () => {
        let internalChecked = this.state.internalChecked;
        let newState = !internalChecked;

        if(this.props.onChange){
            this.props.onChange(newState, this.props.number);
        }
        this.setState({
            internalChecked: newState
        });
    };

    render() {

        let container;
        let borderColor;
        let borderDisableColor;
        let bgColor;
        let bgDisableColor;
        let textColor;
        let textDisableColor;
        const sWidth = Dimensions.get('window').width;
        let label;
        //let labelFontSize;

        const containerStyle = [styles.container];

        const { selectedColor, unSelectedColorText, unSelectedColorBorder, borderRadius } = this.props;

        if(typeof this.props.checked === 'boolean') {
            borderColor = this.props.checked ? selectedColor : unSelectedColorBorder;
            borderDisableColor = this.props.checked ? Color.blockSelect.disableBorder : Color.blockSelect.disableBorder;
            bgColor = this.props.checked ? this.props.style == 'primary'?selectedColor : Color.white:Color.white;
            bgDisableColor = this.props.checked ? this.props.style == 'primary' ? Color.blockSelect.disableBackground : Color.blockSelect.disableBackground : Color.blockSelect.disableBackground;
            textColor = this.props.checked ? this.props.style == 'primary' ? Color.white : Color.blockSelect.select: unSelectedColorText == '' ? this.props.size == 'large' ? Color.blockSelect.normalText: Color.blockSelect.normalText : unSelectedColorText;
            textDisableColor = this.props.checked ? Color.blockSelect.disableText : Color.blockSelect.disableText;
        } else {
            borderColor = this.state.internalChecked ? selectedColor : unSelectedColorBorder;
            borderDisableColor = this.state.internalChecked ? Color.blockSelect.disableBorder : Color.blockSelect.disableBorder;
            bgColor = this.state.internalChecked ?this.props.style == 'primary'? selectedColor : Color.white:Color.white;
            bgDisableColor = this.state.internalChecked ? this.props.style == 'primary' ? Color.blockSelect.disableBackground : Color.blockSelect.disableBackground : Color.blockSelect.disableBackground;
            textColor = this.state.internalChecked ? this.props.style == 'primary' ? Color.white : Color.blockSelect.select : unSelectedColorText == '' ? this.props.size == 'large' ? Color.blockSelect.normalText : Color.blockSelect.normalText : unSelectedColorText;
            textDisableColor = this.state.internalChecked ? Color.blockSelect.disableText : Color.blockSelect.disableText;
        }

        if (!this.props.isRadius) {
            containerStyle.push({borderRadius: 0});
        }

        switch (this.props.size) {
            case 'large':
                containerStyle.push({width: (sWidth- 76)/3, height: 44});
                if(!this.props.description) {
                    containerStyle.push({height: 26});
                }
                label = this.props.label;
                //labelFontSize = 'form';
                break;
            case 'middle':
                containerStyle.push({width: (sWidth - 75)/4, height: 25});
                label = this.props.label.length > 3 ? this.props.label.slice(0, 3) + '...': this.props.label;
                //labelFontSize = 'form';
                break;
            case 'small':
                containerStyle.push({width: (sWidth - 0.12 * 2 * sWidth-(4 * 12))/5, height: 22});
                label = this.props.label.length > 3 ? this.props.label.slice(0, 3) : this.props.label;
                //labelFontSize = 'percent';
                break;
            case 'self':
                containerStyle.push({ height: 25,paddingHorizontal:12});
                label = this.props.label;
                //labelFontSize = 'form';
                break;
        }


        container = (
            <View
                style={[
                    {borderRadius: borderRadius},
                    containerStyle,
                    //{borderColor: this.props.disabled ? Color.button.bsDisable : borderColor},
                    {borderColor: this.props.disabled ? borderDisableColor : borderColor},
                    //{backgroundColor: this.props.disabled ? this.props.style == 'primary' ? Color.button.disabled : Color.white: bgColor }]}
                    {backgroundColor: this.props.disabled ? bgDisableColor : bgColor }]}
            >
                <Label
                    text={label}
                    // type={labelFontSize}
                   // labelStyle={{color: this.props.disabled ? this.props.style == 'primary' ? Color.disLabel : Color.button.disable : textColor,fontSize :fontSize}}
                   labelStyle = {{color : this.props.disabled ? Color.disLabel :textColor,fontSize:this.props.size == 'small' ? FontSize.blockSelect.smallTitleFontSize:FontSize.blockSelect.titleFontSize }}
                />
                {( this.props.description && this.props.size == 'large' ? (
                    <Label
                        text={this.props.description}
                        // type={'percent'}
                        numberOfLines={1}
                        //labelStyle={{color: this.props.disabled ? this.props.style == 'primary' ? Color.disLabel : Color.disLabel : textColor,fontSize:FontSize.blockSelect.descFontSize}}
                        labelStyle={{color: this.props.disabled ? textDisableColor : textColor, fontSize: FontSize.blockSelect.descFontSize}}
                    />
                ) : null )
                }
            </View>
        );

        return (
            <TouchableHighlight activeOpacity={0.7}
                                underlayColor={'transparent'}
                                onPress={this.onChange}
                                disabled = {this.props.disabled}
                                isChecked = {this.state.internalChecked}
            >
                {container}
            </TouchableHighlight>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        // width: (Constant.screenWidth - 76)/3,
        // height: 44,
        borderWidth: 1,
        borderColor: Color.border,
        //borderRadius: 3,
    },
});

CheckBox.propTypes = {
// 标题文字
    label: PropTypes.string.isRequired,
// 说明文字
    description: PropTypes.string,
// 值
    value: PropTypes.string,
// 是否禁用
    disabled: PropTypes.bool,
// 样式：实心/描边
    style: PropTypes.oneOf(['primary','ghost']),
// 尺寸： 大/中/小
    size: PropTypes.oneOf(['small', 'middle', 'large','self']),
// 是否圆角
    isRadius: PropTypes.bool,
};

CheckBox.defaultProps = {
// 标题文字
    label: '',
// 说明文字
    description: '',
// 值
    value: '',
// 是否禁用
    disabled: false,
// 样式：描边
    style: 'ghost',
// 尺寸： 大
    size: 'large',
// 圆角
    isRadius: true
};

module.exports = CheckBox;